<template>
	<view class="all">
		<view class="title">
			欢迎注册
		</view>
		<u-tabs name="cate_name" :list="list" :is-scroll="false" v-model="current"></u-tabs>
		<u-form :model="data1.formData1" ref="form1" label-align="right" :label-width="150" v-show="current == 0">
			<!-- 账号密码登录 -->
			<u-form-item label="用户名" prop="username"><u-input v-model="data1.formData1.username" /></u-form-item>
			<u-form-item label="密码" prop="password"><u-input type="password" :password-icon="true" v-model="data1.formData1.password" /></u-form-item>
			<u-form-item label="确认密码" prop="repassword"><u-input type="password" :password-icon="true" v-model="data1.formData1.repassword" /></u-form-item>
		</u-form>
		<!-- <u-form :model="data2.formData2" ref="form2" label-align="right" :label-width="120" v-show="current == 1">
			
			<u-form-item v-show="current == 1" label="手机号" prop="phone"><u-input
					v-model="data2.formData2.phone" /></u-form-item>
			<u-form-item v-show="current == 1" label="验证码" prop="charcode">
				<u-input v-model="data2.formData2.charcode">
				</u-input>
				<template v-slot:right>
					<u-button type="primary" class="charcode-btn">获取验证码</u-button>
				</template>
			</u-form-item>
		</u-form> -->
		<u-button @click="submit" type="primary" class="login-btn">注册</u-button>
		<view class="bottom">
			<navigator url="/pages/login/login">已有账号？点此去登录</navigator>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		unref,
		computed,
		watch
	} from 'vue';
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app';
	import{ registerApi } from '../../api/user.js'
	import {
		useUserStore
	} from '../../store/user.js'
	const userStore = useUserStore()
	//tab栏的信息
	const list = [{
			cate_name: '账号密码注册'
		},
		// {
		// 	cate_name: '手机号注册'
		// }
	]
	const current = ref(0)
	// 账号密码登录
	const form1 = ref();
	const data1 = reactive({
		formData1: {
			username: "",
			password: "",
			repassword: ""
		},
		rules1: {
			username: [{
				required: true,
				message: '请输入用户名',
				trigger: ['change', 'blur'],
			}],
			password: [{
				required: true,
				min: 6,
				message: '请输入不少于6位的密码',
				trigger: ['change', 'blur'],
			}],
			repassword: [{
				validator: (rule, value, callback) => {
					return value === data1.formData1.password
				},
				message: '两次输入的密码不一致',
				trigger: ['change', 'blur'],
			}]
		}
	});
	//手机号登录
	const form2 = ref();
	const data2 = reactive({
		formData2: {
			phone: '',
			charcode: ''
		},
		rules2: {
			phone: [{
					required: true,
					message: '请输入手机号',
					trigger: ['change', 'blur'],
				},
				{
					validator: (rule, value, callback) => {
						return this.$u.test.mobile(value);
					},
					message: '手机号码不正确',
					// 触发器可以同时用blur和change
					trigger: ['change', 'blur'],
				}
			],
			charcode: [{
				required: true,
				min: 6,
				max: 6,
				message: '请输入6位的验证码',
				trigger: ['change', 'blur']
			}]
		}
	});

	onReady(() => {
		form1.value.setRules(data1.rules1);
		// form2.value.setRules(data2.rules2);
	});

	const submit = (e) => {
		if (current.value == 0) {
			form1.value.validate(async valid => {
				if (valid) {
					
					const result = await registerApi({
						nickname:data1.formData1.username,
						password:data1.formData1.password,
						create_time:new Date()
					})
					if(result.code == 1){
						uni.showToast({
							title: "注册成功，将为您自动的登录",
							icon: 'none'
						});
						uni.setStorageSync('token',randomToken(20))
						uni.setStorageSync('userInfo',result.data)
						uni.switchTab({
							url: '/pages/index/index'
						})
					}
				} else {
					console.log('验证失败');
				}
			});
		} else {
			form2.value.validate(valid => {
				if (valid) {
					uni.showToast({
						title: "验证通过",
						icon: 'none'
					});
					console.log('验证通过');
				} else {
					console.log('验证失败');
				}
			});
		}

	}
	//随机生成token
	const randomToken = (length) => {
		const token = ref('')
		const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
		const charactersLength = characters.length;
		for (let i = 0; i < length; i++) {
			token.value += characters.charAt(Math.floor(Math.random() * charactersLength));
		}
		return token
	}
</script>

<style scoped lang="scss">
	.all {
		width: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -80%);
		text-align: center;
		padding: 0 20rpx;
		.title {
			height: 120rpx;
			line-height: 120rpx;
			font-size: 60rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}
		.char	code-btn {
			width: 200rpx;
			height: 80rpx;
			font-size: 24rpx;
			margin-right: 20rpx;
		}

		.login-btn {
			margin-top: 20rpx;
		}

		.bottom {
			height: 40rpx;
			line-height: 40rpx;
			padding: 20rpx 20rpx;
			text-align: right;
			color: gray;
		}

		.bottom:hover {
			color: red;
		}
	}
</style>